<template>

	<view class="uni-list list-pd">
		<view class="uni-list-cell cell-pd">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<!--  告诉用户  还可以上传多少张图片 -->
					<view class="uni-uploader-title">点击可预览选好的图片</view>
					<view class="uni-uploader-info">{{imageList.length}}/9</view>
				</view>

				<!-- 预览图片 -->
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">

						<block v-for="(image,index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<!-- 删除 点击小x 可以进行图片删除  -->
								<view class="icon iconfont icon-shanchu" @tap="delect(index)"></view>
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage">
								</image>
							</view>
						</block>
						<!--  选择图片进行上传 -->
						<view class="uni-uploader__input-box">
							<view class="uni-uploader__input" @tap="chooseImage"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// imageList: []
			}
		},

		props:{
			imageList:Array
		},
		methods: {

			//点击上传图片
			chooseImage() {

				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// console.log(JSON.stringify(res.tempFilePaths));
						// console.log(res.tempFilePaths)
						this.imageList = res.tempFilePaths
						this.$emit('getimageList',res.tempFilePaths)
						
					}
				});

			},

			//点击图片实现当前图片预览
			previewImage(e) {
				var current = e.target.dataset.src; // 当前图片的链接地址 后期可以做更多的事件
				uni.previewImage({
					current: current,
					urls: this.imageList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},

					}
				});

			},
			
			
		
		
		
		

			
			
			
			
			
			//点击xx 实现当前图片删除 
			delect(index) {
				//任何地方删除一定要提示
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',

					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1)
							//修改父组件的数据  子组件尽量不要直接操作
							this.$emit('upload',this.imageList)
						}



					}
				})

			}
		}
	}
</script>

<style scoped>
	.cell-pd {
		padding: 22upx 30upx;
	}

	.uni-uploader__file {
		position: relative;
	}

	.list-pd {
		margin-top: 50upx;
	}

	.icon-shanchu {
		position: absolute;
		right: 0;
		top: 0;
		background: #333333;
		color: #FFFFFF;
		padding: 2upx 10upx;
		border-radius: 10upx;
		z-index: 99;
	}
</style>
